<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
        /* *{padding: 0;margin: 0;} */
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            text-align: center;
            line-height: 200px;
        }
        form p{
            margin-top: 10px;
        }
    </style>
</head>
<body>  
    <!-- 获取标签内的属性 box.getAttribute("class")  -->
    <!-- 写在标签内 和 标签名以一个空格分隔 叫做属性(属性节点)  id="box" class="one two three" title="hello" -->
    <button class="get">get</button>
    <button class="set">set</button>
    <form action="" method="get">
        <p>
            <label for="">用户名:</label>
            <input type="text" name="user" required placeholder="请输入用户名..." value="" >
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="password" name="pwd" disabled placeholder="请输入密码..." value="" >
        </p>
        <p>     
            <!-- multiple -->
            <select name="year" >
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009" selected>2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
            </select>
        </p>
        <p>
            <label>
                <input type="checkbox" checked name="isCheck"> 我要好好学习JS
            </label>
        </p>
        <p><button>提交</button></p>
    </form>
</body>

<script>
    var box = document.getElementById("box");

    // 元素节点  => 本质是一个对象(对一个或一类事物特征和行为的描述) => 存在诸多属性和方法

    // 元素节点的属性 => 表单元素相关的
    // value        获取和设置表单元素的value值
    // type         获取和设置表单元素的type值
    // name         获取和设置表单元素的name值
    // placeholder  获取和设置表单元素的placeholder值

    // 下拉框 
    // selectedIndex  获取和设置被选中的option的下标
    // selectedOptions  获取被选中的option的集合 (配合multiple  => 被选中的多个option)

    // 状态相关的  
    // required    表单元素是否必填  (false(默认):选填  true:必填)
    // disabled    表单元素是否禁用  (false(默认):可用  true:禁用)
    // checked     表单元素(单选框和复选项)是否选中  (false(默认):未选中  true:选择)


    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];

    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var yearSel = document.getElementsByName("year")[0];
    var isCheck = document.getElementsByName("isCheck")[0];

    getBtn.onclick = function(){
        // console.log(userInp.value);
        // console.log(userInp.type);
        // console.log(userInp.name);
        // console.log(userInp.placeholder);

        // var year = yearSel.value;
        // console.log(year);
        // console.log(yearSel.selectedIndex);
        // console.log(yearSel.selectedOptions);


        console.log(userInp.required);
        console.log(pwdInp.disabled);
        console.log(isCheck.checked);
    }

    
    setBtn.onclick = function(){
        // userInp.type = "password";
        // userInp.name = "user_123123";
        // userInp.placeholder = "pleace enter a username";

        // yearSel.value = "2020";
        // yearSel.selectedIndex = 10;

        userInp.required = false;
        pwdInp.required = true;

        userInp.disabled = true;
        pwdInp.disabled = false;

        isCheck.checked = false;
    }

   






</script>
</html>